<template>
  <div>
    <div class="search-bar">
      <button @click="showSearchBar()" class="search-btn">使用关键字搜索 问答/名师/作品/资讯 </button>
    </div>
    <ul class="tags-tab">
      <li v-for="(item, index) in catalogs" @click="switchActive(index)" :class="['tag-item', activeIndex == index ? 'tag-selected' : '']">{{ item.name }}</li>
    </ul>

    <van-pull-refresh v-model="isRefreshing">
      
    <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="400">
      <li v-for="(item, index) in dataList[activeIndex].results" @click="viewDetail(index)" class="painting-info-item">
        <div class="painting-header">
          <img class="avatar" :src="item.user.avatar" alt="" />
          <div class="info-wrapper">
            <p class="name">{{ item.user.nickname }}</p>
            <p class="title">{{ item.user.title }}</p>
          </div>
          <span class="more">...</span>
        </div>
        <p class="painting-desc">{{ item.text }}</p>
        <image-previewer :images="item.attachments"></image-previewer>
        <div class="painting-footer">
          <span class="painting-date">{{ item.dateStr }}</span>
          <div class="painting-action">
            <img v-if="item.is_favorite" src="../../assets/icon/icon_star_selected.png" alt="" />
            <img v-else src="../../assets/icon/icon_star.png" alt="" />
            <span>收藏 {{ item.favorite_count }}</span>
          </div>
          <div class="painting-action">
            <img v-if="item.is_like" src="../../assets/icon/icon_like_selected.png" alt="" />
            <img v-else src="../../assets/icon/icon_like.png" alt="" />
            <span>已赞 {{ item.like_count }}</span>
          </div>
        </div>
      </li>
    </ul>
    <blank-content v-if="!dataList[activeIndex].results.length" text="暂无作品"></blank-content>
    </van-pull-refresh>
    <search-popup :show-popup="showSearch" @close="closeSearch" ></search-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'
import * as consts from '@/util/const'
import request from '@/util/request'

import Waterfall from '@/components/vant/waterfall'
import BlankContent from '@/components/blankContent'

Vue.component(BlankContent.name, BlankContent)

import { mapGetters } from 'vuex'

// 作品列表（画展）
export default {
  name: 'paintingList',
  data () {
    return {
      showSearch: false,
      disabled: true,
      catalogs: [{'name': '热门'}],
      activeIndex: 0,
      dataList: [{ results: []}],
      isRefreshing: false,
    }
  },
  created () {
    this.getCatalogs()
    this.getData()
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  watch: {
    isRefreshing() {
      if (this.isRefreshing) {
        this.refreshData()
      }
    }
  },
  methods: {
    showSearchBar() {
      this.showSearch = true
    },
    closeSearch() {
      this.showSearch = false
    },
    refreshData() {
      var that = this
      this.dataList[this.activeIndex] = { results: [] }
      this.getData(null, function() {
        that.isRefreshing = false
      })
    },
    viewDetail(index) {
      var painting = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'paintingDetail', params: { painting: painting, id: painting.id }})
    },
    switchActive(index) {
      this.activeIndex = index
      var data = this.dataList[index]
      if (!data.results.length) {
        this.getData()
      }
    },
    loadMoreData() {
      var that = this
      this.disabled = true
      var data = this.dataList[this.activeIndex]
      if (data.next) {
        this.getData(data.next)
      }
    },
    getCatalogs: function() {
      var that = this
      if (this.$store.getters.paintingCatalogs.length) {
        this.catalogs = this.catalogs.concat(this.$store.getters.paintingCatalogs)
        this.$store.getters.paintingCatalogs.forEach(function() {
          that.dataList.push({results: []})
        })
      } else {
        request.getCatalogs(consts.CATALOG_TYPE_PAINTING, function(err, res) {
          if (!err) {
            that.catalogs = that.catalogs.concat(res.results)
            res.results.forEach(function() {
              that.dataList.push({ results: [] })
            })
            var payload = {
              type: consts.CATALOG_TYPE_PAINTING,
              catalogs: res.results
            }
            that.$store.dispatch('getCatalogs', payload)
          }
        })
      }
    },
    /*
     * 获取列表数据
     */
    getData(next=null) {
      var params = {}
      var catalog = this.catalogs[this.activeIndex]
      if (!this.activeIndex) {
        params = { 'status': 2 }
      } else {
        params = { 'catalog': catalog.id }
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.get('/works/', { params: params })
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          var activeData = that.dataList[that.activeIndex]
          activeData.results = activeData.results.concat(res.data.results)
          activeData.previous = res.data.previous
          activeData.next = res.data.next
          activeData.count = res.data.count
          console.log(activeData)
        }
        that.disabled = false
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
  }
}

</script>

<style lang="scss" scoped>
.tags-tab {
  margin-top: 2px;
}
</style>
